<template>
  <div class="one">
    <el-form
      ref="articleForm"
      :model="articleForm"
      :rules="articleFormRule"
      class="demo-articleForm"
      size="small"
      label-width="120px"
    >
      <el-row v-if="visible.shijian">
        <el-col :span="8">
          <el-form-item label="发布时间:" prop="createdDate">
            <el-date-picker
              v-model="articleForm.createdDate"
              type="datetime"
              placeholder="选择日期时间"
              value-format="yyyy-MM-dd HH-mm-ss"
            >
            </el-date-picker>
            <el-checkbox
              v-model="currentTimeChecked"
              @change="change1"
              :true-label="1"
              :false-label="0"
              >即时时间</el-checkbox
            >
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item
            label="文章发布期限:"
            class="titletwolocation"
            prop="expiredDate"
          >
            <el-date-picker
              v-model="articleForm.expiredDate"
              type="date"
              placeholder="选择日期"
              :clearable="false"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
            <span>(不包括此日)</span>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item
            label="首页显示期限:"
            class="titletwolocation"
            prop="expiredDateForIndex"
          >
            <el-date-picker
              v-model="articleForm.expiredDateForIndex"
              type="date"
              placeholder="选择日期"
              :clearable="false"
              value-format="yyyy-MM-dd"
            >
            </el-date-picker>
            <el-checkbox v-model="articleForm.checked3" @change="change2"
              >设置同文章发表期限</el-checkbox
            >
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="标题" prop="header">
            <el-input
              v-model="articleForm.header"
              clearable
              maxlength="50"
              show-word-limit
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <template v-if="visible.fubiaoti">
        <el-row>
          <el-col :span="16">
            <el-form-item label="副标题">
              <el-input v-model="articleForm.subHead"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="显示位置选项" class="titletwolocation">
              <el-radio-group v-model="articleForm.subheadLocation">
                <el-radio :label="1">标题上方</el-radio>
                <el-radio :label="0">标题下方</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="16">
            <el-form-item label="副标题2">
              <el-input v-model="articleForm.subHead2"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="显示位置选项" class="titletwolocation">
              <el-radio-group v-model="articleForm.subheadLocation2">
                <el-radio :label="1">标题上方</el-radio>
                <el-radio :label="0">标题下方</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </template>

      <el-row>
        <el-form-item label="作者和部门:">
          <el-row>
            <el-col :span="12">
              <el-form-item
                label="第一作者:"
                class="titletwolocation"
                prop="author1"
              >
                <el-input v-model="articleForm.author1" class="ib"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="18" v-if="false">
              <el-form-item label="部门:" class="titletwolocation" prop="dept1">
                <el-select
                  v-model="parDepId[0]"
                  placeholder="请选择"
                  @change="getChildProject(0)"
                >
                  <el-option
                    v-for="item in depOptions1"
                    :key="item.depId"
                    :label="item.name"
                    :value="item.depId"
                  >
                  </el-option>
                </el-select>

                <el-select
                  v-model="articleForm.dept1"
                  placeholder="请选择"
                  style="margin-left: 20px"
                >
                  <el-option
                    v-for="item in depOptionsSon[0]"
                    :key="item.depId"
                    :label="item.name"
                    :value="item.depId"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <template v-if="visible.moreAuthor">
            <el-row>
              <el-col :span="12">
                <el-form-item
                  label="第二作者:"
                  class="titletwolocation"
                  prop="author2"
                >
                  <el-input v-model="articleForm.author2" class="ib"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="18" v-if="false">
                <el-form-item
                  label="部门:"
                  class="titletwolocation"
                  prop="dept2"
                >
                  <el-select
                    v-model="parDepId[1]"
                    placeholder="请选择"
                    @change="getChildProject(1)"
                  >
                    <el-option
                      v-for="item in depOptions1"
                      :key="item.depId"
                      :label="item.name"
                      :value="item.depId"
                    >
                    </el-option>
                  </el-select>

                  <el-select
                    v-model="articleForm.dept2"
                    placeholder="请选择"
                    style="margin-left: 20px"
                  >
                    <el-option
                      v-for="item in depOptionsSon[1]"
                      :key="item.depId"
                      :label="item.name"
                      :value="item.depId"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item
                  label="第三作者:"
                  class="titletwolocation"
                  prop="author3"
                >
                  <el-input v-model="articleForm.author3" class="ib"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="18" v-if="false">
                <el-form-item
                  label="部门:"
                  class="titletwolocation"
                  prop="dept3"
                >
                  <el-select
                    v-model="parDepId[2]"
                    placeholder="请选择"
                    @change="getChildProject(2)"
                  >
                    <el-option
                      v-for="item in depOptions1"
                      :key="item.depId"
                      :label="item.name"
                      :value="item.depId"
                    >
                    </el-option>
                  </el-select>

                  <el-select
                    v-model="articleForm.dept3"
                    placeholder="请选择"
                    style="margin-left: 20px"
                  >
                    <el-option
                      v-for="item in depOptionsSon[2]"
                      :key="item.depId"
                      :label="item.name"
                      :value="item.depId"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item
                  label="第四作者:"
                  class="titletwolocation"
                  prop="author4"
                >
                  <el-input v-model="articleForm.author4" class="ib"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="18" v-if="false">
                <el-form-item
                  label="部门:"
                  class="titletwolocation"
                  prop="dept4"
                >
                  <el-select
                    v-model="parDepId[3]"
                    placeholder="请选择"
                    @change="getChildProject(3)"
                  >
                    <el-option
                      v-for="item in depOptions1"
                      :key="item.depId"
                      :label="item.name"
                      :value="item.depId"
                    >
                    </el-option>
                  </el-select>

                  <el-select
                    v-model="articleForm.dept4"
                    placeholder="请选择"
                    style="margin-left: 20px"
                  >
                    <el-option
                      v-for="item in depOptionsSon[3]"
                      :key="item.depId"
                      :label="item.name"
                      :value="item.depId"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item
                  label="第五作者:"
                  class="titletwolocation"
                  prop="author5"
                >
                  <el-input v-model="articleForm.author5" class="ib"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="18" v-if="false">
                <el-form-item
                  label="部门:"
                  class="titletwolocation"
                  prop="dept5"
                >
                  <el-select
                    v-model="parDepId[4]"
                    placeholder="请选择"
                    @change="getChildProject(4)"
                  >
                    <el-option
                      v-for="item in depOptions1"
                      :key="item.depId"
                      :label="item.name"
                      :value="item.depId"
                    >
                    </el-option>
                  </el-select>

                  <el-select
                    v-model="articleForm.dept5"
                    placeholder="请选择"
                    style="margin-left: 20px"
                  >
                    <el-option
                      v-for="item in depOptionsSon[4]"
                      :key="item.depId"
                      :label="item.name"
                      :value="item.depId"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item
                  label="第六作者:"
                  class="titletwolocation"
                  prop="author6"
                >
                  <el-input v-model="articleForm.author6" class="ib"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="18" v-if="false">
                <el-form-item
                  label="部门:"
                  class="titletwolocation"
                  prop="dept6"
                >
                  <el-select
                    v-model="parDepId[5]"
                    placeholder="请选择"
                    @change="getChildProject(5)"
                  >
                    <el-option
                      v-for="item in depOptions1"
                      :key="item.depId"
                      :label="item.name"
                      :value="item.depId"
                    >
                    </el-option>
                  </el-select>

                  <el-select
                    v-model="articleForm.dept6"
                    placeholder="请选择"
                    style="margin-left: 20px"
                  >
                    <el-option
                      v-for="item in depOptionsSon[5]"
                      :key="item.depId"
                      :label="item.name"
                      :value="item.depId"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item
                  label="第七作者:"
                  class="titletwolocation"
                  prop="author7"
                >
                  <el-input v-model="articleForm.author7" class="ib"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="18" v-if="false">
                <el-form-item
                  label="部门:"
                  class="titletwolocation"
                  prop="dept7"
                >
                  <el-select
                    v-model="parDepId[6]"
                    placeholder="请选择"
                    @change="getChildProject(6)"
                  >
                    <el-option
                      v-for="item in depOptions1"
                      :key="item.depId"
                      :label="item.name"
                      :value="item.depId"
                    >
                    </el-option>
                  </el-select>

                  <el-select
                    v-model="articleForm.dept7"
                    placeholder="请选择"
                    style="margin-left: 20px"
                  >
                    <el-option
                      v-for="item in depOptionsSon[6]"
                      :key="item.depId"
                      :label="item.name"
                      :value="item.depId"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item
                  label="第八作者:"
                  class="titletwolocation"
                  prop="author8"
                >
                  <el-input v-model="articleForm.author8" class="ib"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="18" v-if="false">
                <el-form-item
                  label="部门:"
                  class="titletwolocation"
                  prop="dept8"
                >
                  <el-select
                    v-model="parDepId[7]"
                    placeholder="请选择"
                    @change="getChildProject(7)"
                  >
                    <el-option
                      v-for="item in depOptions1"
                      :key="item.depId"
                      :label="item.name"
                      :value="item.depId"
                    >
                    </el-option>
                  </el-select>

                  <el-select
                    v-model="articleForm.dept8"
                    placeholder="请选择"
                    style="margin-left: 20px"
                  >
                    <el-option
                      v-for="item in depOptionsSon[7]"
                      :key="item.depId"
                      :label="item.name"
                      :value="item.depId"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </template>
        </el-form-item>
      </el-row>
      <el-row v-if="visible.biaotitupian">
        <el-col :span="16">
          <el-form-item label="标题图片">
            <div class="tupianxinwenBox" style="display: flex">
              <el-upload
                class="avatar-uploader"
                :action="uploadFileUrl"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                :data="{ siteAlias: siteRow.alias || null, fileType: 'images' }"
                :headers="headers"
              >
                <img
                  v-bind:src="
                    articleForm.ip +
                    articleForm.image[articleForm.image.length - 1].storeName
                  "
                  v-if="imageLength"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
              <el-button
                @click="handleAvatarSuccess(null)"
                v-if="imageLength"
                style="display: inline-block"
                >取消</el-button
              >
            </div>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row v-if="visible.waibuUrl">
        <el-form-item label="启用外部链接:" prop="externalLinks">
          <el-row>
            <el-col :span="12">
              <el-input v-model="articleForm.externalLinks"></el-input>
            </el-col>
            <el-col :span="3">
              <el-checkbox
                v-model="articleForm.useExternalLinks"
                :true-label="1"
                :false-label="0"
                >启用外部链接</el-checkbox
              >
            </el-col>

            <el-col :span="8">
              <span> 请确保输入的链接完整且是可用的！(http://...)</span>
            </el-col>
          </el-row>
        </el-form-item>
      </el-row>
      <el-row v-if="visible.zhaiyao">
        <el-form-item label="摘要:">
          <el-input
            type="textarea"
            :rows="4"
            placeholder="请输入内容"
            v-model="articleForm.summary"
            maxlength="1000"
            show-word-limit
          />
        </el-form-item>
      </el-row>
      <!-- 显示隐藏编辑区 -->
      <el-row>
        <el-form-item label="显示隐藏编辑区">
          <el-button
            @click="visible.shijian = !visible.shijian"
            v-if="false"
            v-hasRole="['admin']"
            v-hasPermi="['system:article:time']"
            >{{ visible.shijian ? "隐藏" : "显示" }}时间编辑区</el-button
          >
          <el-button @click="visible.fubiaoti = !visible.fubiaoti"
            >{{ visible.fubiaoti ? "隐藏" : "显示" }}副标题</el-button
          >
          <el-button @click="visible.moreAuthor = !visible.moreAuthor"
            >{{ visible.moreAuthor ? "隐藏" : "显示" }}更多作者</el-button
          >
          <el-button @click="visible.biaotitupian = !visible.biaotitupian"
            >{{ visible.biaotitupian ? "隐藏" : "显示" }}标题图片</el-button
          >
          <el-button @click="visible.waibuUrl = !visible.waibuUrl"
            >{{ visible.waibuUrl ? "隐藏" : "显示" }}外部链接编辑区</el-button
          >
          <el-button @click="visible.zhaiyao = !visible.zhaiyao"
            >{{ visible.zhaiyao ? "隐藏" : "显示" }}摘要</el-button
          >
        </el-form-item>
      </el-row>

      <el-row>
        <el-form-item label="内容:" class="wangeditor">
          <el-checkbox v-model="shouhangsuojin">段落首行缩进</el-checkbox>
          <!-- <el-tooltip class="item" effect="dark" content="取消第一段缩进" placement="top-start">
            <el-checkbox v-model="biaoti">标题</el-checkbox>
          </el-tooltip> -->

          <el-button @click="formatText">自动排版</el-button>

          <Wangeditor
            :template="articleForm.body"
            v-if="articleForm.body != null"
            @editorChange="editorChange"
            ref="wangEditor"
            :enterIsP="true"
          ></Wangeditor>
        </el-form-item>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import pinyin from "js-pinyin";
import { Loading } from "element-ui";
import Wangeditor from "@/components/wangEditor";
import { listDep, subList } from "@/api/extendApplication/complaints.js";
import {
  getChannelListForTree,
  getChannelListForYigaoduotou,
} from "@/api/content/clounm";
import { validURL } from "@/utils/validate";

import {
  validateHeader,
  getParentDep,
  duplicateSubmissionList,
} from "@/api/content/article";

import { mapState } from "vuex";
import { getToken } from "@/utils/auth";

export default {
  props: {
    articleForm: {
      type: Object,
      default: () => {
        return {};
      },
    },
    shridsname: "", //审核人  workflowStatuId  9||11
    dept1: {},
    dept2: {},
    dept3: {},
    dept4: {},
    dept5: {},
    dept6: {},
    dept7: {},
    image: {},
    imgNews: {},

    createdDate: {},
    expiredDateForIndex: {},
    channelId: String,
    siteId: String,
  },
  data() {
    var validURL2 = (rule, value, callback) => {
      let flag = validURL(this.articleForm.externalLinks);
      if (!flag) {
        return callback("链接格式不正确");
      } else {
        return callback();
      }
    };

    return {
      fileType: ["jpg", "png", "jepg"],
      uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
      imageUrl: "",
      headers: {
        Authorization: getToken(),
      },
      articleFormRule: {
        externalLinks: [
          { required: false, validator: validURL2, trigger: "blur" },
        ],
        shrids: [{ required: true, message: "请选择审核人", trigger: "blur" }],
        header: {
          required: true,
          message: "请输入标题",
          trigger: "blur",
        },
        author1: {
          required: true,
          message: "请输入作者",
          trigger: "blur",
        },
        dept1: [
          {
            required: false,
            message: "请选择部门",
            trigger: "blur",
          },
        ],
      },
      //即时时间
      currentTimeChecked: false,
      shouhangsuojin: true,
      biaoti: false,
      //部门选项
      parDepId: [],
      depOptions1: [],
      depOptionsSon: [],

      visible: {
        shijian: false,
        yigaoduotou: false,
        zhaiyao: false,
        fubiaoti: false,
        moreAuthor: false,
        waibuUrl: false,
        biaotitupian: false,
      },

      initPStyle:
        "text-indent: 2em;  font-size: 1em; font-weight: normal; color: #000",
      initPStyle2: "  font-size: 1em; font-weight: normal; color: #000",
    };
  },

  components: { Wangeditor },

  computed: {
    ...mapState({
      siteRow: (state) => state.column.siteRow,
    }),
    imageLength() {
      return this.articleForm?.image?.length;
    },
  },
  mounted() {},
  watch: {},
  methods: {
    //获取编辑器里面的东西再传给页面内
    editorChange(templete) {
      console.log("templete: ", templete);
      this.$emit("update:body", templete);
    },

    handleAvatarSuccess(res) {
      // this.imageUrl = res.url;

      this.$emit("biaotiTupian", res);
    },
    beforeAvatarUpload(file) {
      // 校检文件类型
      let fileExtension = "";
      if (file.name.lastIndexOf(".") > -1) {
        fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
      }
      const isTypeOk = this.fileType.some((type) => {
        if (file.type.indexOf(type) > -1) return true;
        if (fileExtension && fileExtension.indexOf(type) > -1) return true;
        return false;
      });
      if (!isTypeOk) {
        this.$message.error(
          `文件格式不正确, 请上传${this.fileType.join(" ， ")}格式文件!`
        );
        return false;
      }
    },

    formatText() {
      //选择全部内容
      var html = this.$refs.wangEditor.editor.$textElem.elems[0].childNodes;
      //选择 选中的文字
      // var html1 = this.$refs.wangEditor.editor.selection.getSelectionContainerElem()
      //   .elems[0];
      // var html;
      // if (html1.nodeName == "DIV") {
      //   html = html1.childNodes;
      // } else if (html1.nodeName == "P") {
      //   html = html1;
      // }

      if (html.length > 0) {
        // html.reduce((item) => {
        // js 遍历删除dom元素后，导致dom原数组缩短，导致遍历不完整。。这个咋解决来着//？？    //从后往前遍历
        for (var i = html.length - 1; i >= 0; i--) {
          let item = html[i];

          if (i == 0 && this.biaoti) {
            item.style.cssText = this.initPStyle2;
            continue;
          }
          item.innerHTML = item.innerHTML
            .replace(/\s/gi, "")
            .replace(/<br>/gi, "")
            .replace(/<div/gi, "<p")
            .replace(/<\/div/gi, "</p")
            .replace(/(&nbsp;)+/gi, "&nbsp;") //  多个空格转换  为 一个空格
            .trim();

          if (item.innerHTML.length == 0) {
            item.parentNode.removeChild(item);
          }
          // 富文本编辑的内容默认外层都是由p标签包容，所以直接在p标签上进行设置默认排版的样式
          /**
           * wangeditor  源码 缩进 采用的是paddingleft  已改为text-indent 首行缩进
           */
          if (item.nodeName == "P") {
            if (this.shouhangsuojin) {
              item.style.cssText = this.initPStyle;
            } else {
              item.style.cssText = this.initPStyle2;
            }
          }
          if (item.childNodes.length > 0) {
            // 遍历找到子元素中存在img标签的内容进行设置默认样式
            item.childNodes.forEach((child) => {
              if (child.localName == "img") {
                // 获取原图width、height
                let width = child.width;
                let height = child.height;
                let ratio = width / height;
                let setW = 600;
                let setH = 0; // 等比计算
                if (setW / setH != ratio) {
                  setH = setW / ratio;
                }
                // 给img标签设置行内样式
                child.setAttribute("width", setW);
                child.setAttribute("height", setH);
                child.style.cssText = "text-align: center";
                item.style.cssText += "text-align: center";
              }
            });
          }

          // this.$refs.wangEditor.editor.txt.html(html);
        }
      }
    },

    formatText2() {
      var html = this.articleForm.body;
      html = this.doFormatText(html);

      if (true) {
        html = '<div style="text-indent:2em">' + html + "</div>";
      }
    },
    doFormatText(editorhtml) {
      var tempimg = new Array();
      var temptable = new Array();
      var tempobject = new Array();
      var tmpDiv = document.createElement("DIV");

      editorhtml = editorhtml.replace(
        /<div style="page-break-after: always;?">\s*<span style="display: none;?">&nbsp;<\/span>\s*<\/div>/gi,
        "<p>[page]</p>"
      );

      tmpDiv.innerHTML = editorhtml
        .replace(/&nbsp;/gi, "")
        .replace(/<div/gi, "<p")
        .replace(/<\/div/gi, "</p");

      //判断是否是  ie浏览器
      if (window.navigator.userAgent.toLowerCase().indexOf("msie") > 0) {
        tmpDiv.innerHTML = tmpDiv.innerHTML.replace(/<\/p>/gi, "<br /></p>");
      }

      //获取  table  标签
      var tables = tmpDiv.getElementsByTagName("TABLE");

      if (tables != null && tables.length > 0) {
        for (var j = 0; j < tables.length; j++) {
          //获取描述元素（包括其后代）的序列化HTML片段
          temptable[temptable.length] = tables[j].outerHTML;
        }
        var formattableCount = 0;
        for (var j = 0; j < tables.length; ) {
          tables[j].outerHTML = "#FormatTableID_" + formattableCount + "#";
          formattableCount++;
        }
      }

      //获取  OBJECT  标签
      var objects = tmpDiv.getElementsByTagName("OBJECT");
      if (objects != null && objects.length > 0) {
        for (var j = 0; j < objects.length; j++) {
          tempobject[tempobject.length] = objects[j].outerHTML;
        }
        var formatobjectCount = 0;
        for (var j = 0; j < objects.length; ) {
          objects[j].outerHTML = "#FormatObjectID_" + formatobjectCount + "#";
          formatobjectCount++;
        }
      }

      //获取  IMG  标签
      var imgs = tmpDiv.getElementsByTagName("IMG");
      if (imgs != null && imgs.length > 0) {
        for (var j = 0; j < imgs.length; j++) {
          var t = document.createElement("IMG");
          t.alt = imgs[j].alt;
          t.src = imgs[j].src;
          t.width = imgs[j].width;
          t.height = imgs[j].height;
          t.align = imgs[j].align;
          tempimg[tempimg.length] = t;
        }
        var formatImgCount = 0;
        for (var j = 0; j < imgs.length; ) {
          imgs[j].outerHTML = "#FormatImgID_" + formatImgCount + "#";
          formatImgCount++;
        }
      }

      //获取  b  标签
      //
      var strongarray = new Array();
      var strongcount = 0;
      let a = tmpDiv.getElementsByTagName("b");
      for (var i = 0; i < a.length; i++) {
        strongarray[strongcount] = tmpDiv
          .getElementsByTagName("b")
          [i].innerText.trim();
        tmpDiv.getElementsByTagName("b")[i].innerHTML =
          "#FormatStrongID_" + strongcount + "_FormatStrongID#";
        strongcount++;
      }
      let s = tmpDiv.getElementsByTagName("strong");
      for (var i = 0; i < s.length; i++) {
        strongarray[strongcount] = tmpDiv
          .getElementsByTagName("strong")
          [i].innerText.trim();
        tmpDiv.getElementsByTagName("strong")[i].innerHTML =
          "#FormatStrongID_" + strongcount + "_FormatStrongID#";
        strongcount++;
      }

      var html = this.processFormatText2(tmpDiv.innerText);
      for (var i = 0; i < strongcount; i++) {
        html = html.replace(
          "#FormatStrongID_" + i + "_FormatStrongID#",
          "<strong>" + strongarray[i] + "</strong>"
        );
      }

      html = this.processFormatText(html);
      html = html.replace(
        /<p>\[page\]<\/p>/gi,
        '<div style="page-break-after: always;"><span style="display: none;">&nbsp;</span></div>'
      );
      if (temptable != null && temptable.length > 0) {
        for (var j = 0; j < temptable.length; j++) {
          var tablehtml = temptable[j];
          html = html.replace("#FormatTableID_" + j + "#", tablehtml);
        }
      }

      if (tempobject != null && tempobject.length > 0) {
        for (var j = 0; j < tempobject.length; j++) {
          var objecthtml = '<p align="center">' + tempobject[j] + "</p>";
          html = html.replace("#FormatObjectID_" + j + "#", objecthtml);
        }
      }

      if (tempimg != null && tempimg.length > 0) {
        for (var j = 0; j < tempimg.length; j++) {
          var imgheight = "";
          var imgwidth = "";
          if (tempimg[j].height != 0)
            imaheight = ' height="' + tempimg[j].height + '"';
          if (tempimg[j].width != 0)
            imgwidth = ' width="' + tempimg[j].width + '"';
          var imgalign = "";
          if (tempimg[j].align != "")
            imgalign = ' align="' + tempimg[j].align + '"';
          var imghtml =
            '<p align="center"><img src="' +
            tempimg[j].src +
            '" alt="' +
            tempimg[j].alt +
            '"' +
            imgwidth +
            " " +
            imgheight +
            ' align="' +
            tempimg[j].align +
            '" border="0"></p>';
          html = html.replace("#FormatImgID_" + j + "#", imghtml);
        }
      }

      while (html.indexOf("</p></p>") != -1)
        html = html.replace("</p></p>", "</p>");
      while (html.indexOf('<p><p align="center">') != -1)
        html = html.replace('<p><p align="center">', '<p align="center">');

      return html;
    },
    DBC2SBC(str) {
      var result = "";
      for (var i = 0; i < str.length; i++) {
        var code = str.charCodeAt(i);
        // “65281”是“！”，“65373”是“｝”，“65292”是“，”。不转换"，"

        if (code >= 65281 && code < 65373 && code != 65292 && code != 65306) {
          //  “65248”是转换码距
          result += String.fromCharCode(str.charCodeAt(i) - 65248);
        } else {
          result += str.charAt(i);
        }
      }
      return result;
    },
    processFormatText(textContext) {
      var text = this.DBC2SBC(textContext);
      var prefix = "";
      var tmps = text.split("\n");
      var html = "";
      for (var i = 0; i < tmps.length; i++) {
        var tmp = tmps[i].trim();
        if (tmp.length > 0) {
          var reg = /#Format[A-Za-z]+_\d+#/gi;
          var f = reg.exec(tmp);
          if (f != null) {
            tmp = tmp.replace(/#Format[A-Za-z]+_\d+#/gi, "");
            html += f;
            if (tmp != "") {
              html += tmp;
            }
          } else {
            html += tmp;
          }
        }
      }
      return html;
    },
    processFormatText2(textContext) {
      var text = this.DBC2SBC(textContext);
      var prefix = "";
      var tmps = text.split("\n");
      var html = "";
      var paraStr = "";
      for (var i = 0; i < tmps.length; i++) {
        var tmp = tmps[i].trim();
        if (tmp.length > 0) {
          paraStr = "";
          var k = tmp.indexOf("#FormatStrongID_");
          if (k == -1) {
            paraStr = tmp;
          } else {
            for (; k != -1 && k <= tmp.length; ) {
              if (k == 0) {
                var kend = tmp.indexOf("_FormatStrongID#", k + 16);
                paraStr += tmp.substr(k, kend - k + 16);
                tmp = tmp.substr(kend + 16);
                k = tmp.indexOf("#FormatStrongID_");
              } else {
                paraStr += tmp.substr(0, k);
                tmp = tmp.substr(k);
                k = tmp.indexOf("#FormatStrongID_");
              }
            }
            if (tmp.length > 0) {
              paraStr += tmp;
            }
          }
          html += "<p>" + paraStr + "</p>\n";
        }
      }
      return html;
    },
    //即时时间
    change1(value) {
      value && this.$emit("update:createdDate", new Date());
    },
    //设置同文章发表期限
    change2(value) {
      value &&
        this.$emit("update:expiredDateForIndex", this.articleForm.expiredDate);
    },
  },
};
</script>

<style scoped lang="scss">
.one {
  margin: 0 0 0px 0;
}
::v-deep .codeEditor {
  .el-form-item__content {
    height: 500px;
    margin: 0 0 40px 0;
  }
}
// ::v-deep .el-form-item .wangeditor {
//   .el-form-item__content {
//     height: auto !important;
//     line-height: auto !important;
//   }
// }

.bottom {
  display: flex;
  // height: 500px;
  height: 50vh;
  .bottom_l {
    flex: 1;
    min-width: 240px;
    max-width: 240px;
    background: #fffbf0;
    overflow: overlay;
    overflow: auto;
  }
}
table {
  font-family: verdana, arial, sans-serif;
  font-size: 11px;
  color: #333333;
  border-width: 1px;
  border-color: #666666;
  border-collapse: collapse;
}

table th {
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #666666;
  background-color: #dedede;
}

table td {
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #666666;
  background-color: #ffffff;
}

.el-col {
  border-right: 1px solid #ccc;
}
.el-col:last-child {
  border-right: none;
}
.el-row {
  border: 1px solid #ccc;
  margin-bottom: -1px !important;
}
.el-row .el-row {
  border-right: none;
  border-top: none;
  border-left: none;
}

// 标题图片上传
::v-deep .avatar-uploader {
  height: 160px;
  .el-upload {
    border: 1px dashed #4e4d4d;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    padding: 4px;
  }
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}
.avatar {
  width: 100%;
  max-width: 100%;
  height: 150px;
  display: block;
}
.tupianxinwenBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
